<template>
    <div>
        <el-card>
            <el-form ref="user" :model="userInfo" label-width="80px">
                <el-form-item label="用户id:">
                    <div>
                        <el-input v-model="userInfo.id"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="用户名">
                    <div>
                        <el-input v-model="userInfo.username"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="邮箱">
                    <div>
                        <el-input v-model="userInfo.email"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="用户类型:">
                    <div>
                        <el-input v-model="userInfo.type"></el-input>
                    </div>
                </el-form-item>
            </el-form>
            <div class="button-div">
                <div></div>
                <el-button type="primary" @click="update">修改</el-button>
            </div>
        </el-card>
    </div>

</template>

<script>

export default {
    created() {
        
        this.userInfo = this.$route.params
        console.log(this.userInfo)
    },
    data() {
        return {
            userInfo:{
                id:0,
                username:"",
                email:"",
                type:0, 
            }
        }
    },
    methods:{
        update(){
            this.$axios({
                url: 'http://localhost:8000/user/'+this.userInfo.id,
                method: 'put',
                headers: {
                    AUTHORIZATION: sessionStorage.getItem('access-admin')
                },
                data:{
                    id:this.userInfo.id,
                    username:this.userInfo.username,
                    email:this.userInfo.email,
                    type:this.userInfo.type
                }
            }).then((response) => {
                console.log(response)
                this.$message.success('修改成功!')
            }).catch(err => {
                console.log(err)
                this.$message.error(err.response.data.message)
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.el-card{
    width: 60%;
}
.button-div{
    display: flex;
    div{
        flex: 1;
    }
}

</style>